<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
    <div class="header">
        <a href="homepage.html"><img src="img/1.png" alt=""></a>
        <p>已有我买账户请<a href="login.html">登录</a></p>
    </div>
    <div class="login">
        <div class="cont">
        <form action="" class="bd">
            <p>请登录中粮我买网</p>
            <input type="text" name="" placeholder="用户名" id="username">
            <input type="password" name="" placeholder="密码" id="password">
            <input type="button" value="注册" class="zhuce"><span></span>
            <!-- <a href="register.html"><input type="button" value="注册" class="zhuce"></a> -->
            <img src="img/6.png" alt="">
            <!-- 后面图片改掉 -->
        </form>  
    </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script>   
    $(".zhuce").click(function(){
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"register",
                un:$("#username").val(),
                pw:$("#password").val()
            },
            success:res=>{
                // console.log(res)
                res = JSON.parse(res);
                if(res.code === 1){
                    $(this).next().html("注册成功，3秒后跳转到<a href='login.html'>登录</a>")
                    setTimeout(() => {
                        location.href = "login.html";
                    }, 3000);
                }else if(res.code === 0){
                    alert("你的用户名被注册了，不好意思换一个吧");
                }
            }
        })
    })
</script>
</html>